<template>
    <div class="main-background flex-row">
        <div class="flex-body">
            <div class="main-container sea-transition" :class="expand === true? '': 'width-80'">

                <div class="main-toolbar flex-row">
                    <div class="main-text-btn">
                        <i class="fa fa-fw fa-home"></i>
                    </div>

                    <div class="main-text-btn">
                        <el-popover placement="top-start" trigger="click">
                            <span>popover</span>
                            <template #reference>
                                <span>首选项</span>
                            </template>
                        </el-popover>
                    </div>
                    <div class="main-text-btn">
                        <el-popover placement="top-start" trigger="click">
                            <span>popover</span>
                            <template #reference>
                                <span>编辑</span>
                            </template>
                        </el-popover>
                    </div>
                    <div class="main-text-btn">
                        <el-popover placement="top-start" trigger="click">
                            <span>popover</span>
                            <template #reference>
                                <span>主题</span>
                            </template>
                        </el-popover>
                    </div>
                    <div class="align-right">
                        <div class="main-text-btn">
                            <i class="fa fa-fw fa-home"></i>首页
                        </div>
                        <div class="main-text-btn">
                            <i class="fa fa-fw fa-user"></i>用户
                        </div>
                        <div class="main-text-btn">
                            <i class="fa fa-fw fa-book"></i>帮助
                        </div>
                    </div>
                </div>

                <div class="sea-bread" style="padding: 6px 10px;">
                    <ul class="sea-breadcrumb disabled-list-style inline-block ">
                        <li class="text-strong">
                            <el-popover placement="top-start" trigger="click">
                                <span>popover</span>
                                <template #reference>
                                    <span>步骤 1</span>
                                </template>
                            </el-popover>
                        </li>
                        <li>
                            <el-popover placement="top-start" trigger="click">
                                <span>popover</span>
                                <template #reference>
                                    <span>步骤 1</span>
                                </template>
                            </el-popover>
                        </li>
                        <li>
                            <el-popover placement="top-start" trigger="click">
                                <span>popover</span>
                                <template #reference>
                                    <span>步骤 1</span>
                                </template>
                            </el-popover>
                        </li>
                    </ul>
                </div>

                <div class="flex-row main-body">
                    <div class="flex-left fill-default flex-row-gap border-right"
                         style="width: 28px; padding: 10px 0;writing-mode: vertical-rl;align-items: center">
                        <div class="main-text-btn" @click="()=> expendNavigation = !expendNavigation">工程</div>
                    </div>

                    <!-- left menu -->
                    <div class="flex-left flex-column sea-transition" style="width: 320px;" :class="expendNavigation?'': 'shrink-width'">
                        <div class="flex-header search-bar flex-row border"
                             style="box-sizing: border-box;">
                            <el-input type="text" size="small" class="no-border" placeholder="请输入……"
                                      style="margin: 0;">
                                <template #suffix><i class="fa fa-fw fa-search"></i></template>
                            </el-input>

                            <button class="sea-btn-link"><i class="fa fa-fw fa-paperclip"></i></button>
                            <button class="sea-btn-link" @click="()=> expendNavigation = !expendNavigation">
                                <i class="fa fa-fw fa-minus-square-o"></i>
                            </button>
                        </div>

                        <div class="flex-body scroll-mini box" style="padding-right: 10px;">
                            <div v-for="(item, idx) in menus" :key="idx">
                                <h5><i :class="item.icon"></i>{{ item.title }}</h5>
                                <ul class="disabled-list-style" style="margin-left: 32px;">
                                    <li v-for="(sub, index) in item.children" :key="index"
                                        class="text-block" :class="sub.active?'active':''"
                                        @click="openPage(sub)">
                                        {{ sub.title }}<i :class="sub.icon"></i>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- body -->
                    <div class="flex-body flex-column main-body">
                        <div class="flex-header sea-tabs flex-row relative-panel">
                            <div v-for="(item, idx) in menus_tabs" :key="idx"
                                 class="sea-tab-item" :class="item.active?'active':''"
                                 style="display: flex" @click.right="click">
                                <span @click="openPage(item)">{{ item.title }}</span>
                                <icon-close class="sea-tab-item-remove" @click="removeTab(idx)"></icon-close>
                            </div>

                            <sea-popover v-model="popover_opened" :reference="popover_dom"
                                         class="small-card with-shadow arrow-top" style="z-index: 19931006;">
                                <span>sth. in popover...</span>
                            </sea-popover>


                            <div class="align-right sea-tab-item" @click="scrollTop">返回顶部</div>
                        </div>
                        <div ref="bodyRef" class="flex-body hidden-scroll" style="scroll-behavior: smooth;">
                            <router-view v-slot="{ Component }">
                                <transition>
                                    <keep-alive>
                                        <component :is="Component">13123</component>
                                    </keep-alive>
                                </transition>
                            </router-view>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="flex-left main-right">
            <div class="main-header-item bg-primary"
                 @click="()=>{expand = !expand}" title="半屏展示">
                <i :class="expand?'fa fa-fw fa-compress':'fa fa-fw fa-expand'"></i>
            </div>

            <div class="main-header-item bg-primary"
                 @click="()=>{displayHeader = !displayHeader}" title="隐藏标题栏">
                <i :class="displayHeader?'fa fa-fw fa-chevron-up':'fa fa-fw fa-chevron-down'"></i>
            </div>

            <div style=""></div>

            <div class="main-header-item bg-success" @click="homePage" title="返回主页">
                <i class="fa fa-home"></i>
            </div>
            <div class="main-header-item bg-success">
                <i class="fa fa-user"></i>
            </div>
            <div class="main-header-item bg-success">
                <i class="fa fa-book"></i>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue';
import MenuManager, {MenuItemType} from "@/starter/menu-manager";
import {useMenu} from "@/view/example/use-menu";

const popper_options = ref({
    modifiers: [
        {
            name: 'computeStyles',
            options: {gpuAcceleration: false, adaptive: false}
        }
    ]
});

// 带限制区域的弹窗
const popover_opened = ref<Boolean>(false);
const popover_dom = ref<HTMLElement>(undefined);

const click = (evt: Event) => {
    evt.preventDefault();
    popover_dom.value = evt.currentTarget;
    popover_opened.value = true;
}

// 半屏展示
const expand = ref(true);

// 展示标题栏
const displayHeader = ref(true);

// 是否展开侧滑导航
const expendNavigation = ref(true);


// 是否展开搜索栏
const expendSearchbar = ref(true);

// 菜单栏列表
const menus = ref([]);
MenuManager.getExamples().then(list => {
    menus.value = list;
})

const {menus_tabs, openPage, removeTab, homePage} = useMenu();

/**
 * 返回到顶部
 */
const bodyRef = ref<HTMLElement>();
const scrollTop = () => {
    bodyRef.value.scrollTop = 0;
}

// album start -------------------------------------------------------------------------------

</script>

<style scoped lang="scss">

$main-bg-color: #F5F5F5;
$main-border-color: lightgray;

.main-text-btn {
    cursor: pointer;
    padding: 0 10px;
}

// 一级工具栏
.main-toolbar {
    display: flex;
    padding: 4px 0;
    align-items: center;

    background-color: $main-bg-color;
    border-bottom: 1px solid lightgray;
}

// 二级面包屑
.sea-bread {
    display: flex;
    padding: 4px 0;
    align-items: center;

    background-color: $main-bg-color;
    border-bottom: 1px solid lightgray;
}

.main-body {
    background-color: $main-bg-color;
}

.search-bar {
    height: 28px;
    background-color: $main-bg-color;
    border-right: 1px solid lightgray;
}

.sea-tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid lightgray;

    .sea-tab-item {
        height: 28px;
        cursor: pointer;
        padding: 4px 10px;
        box-sizing: border-box;
        border-right: 1px solid lightgray;

        > span {
            padding: 0 10px;
        }

        &.active {
            border-bottom: 2px solid deepskyblue;
            background-color: #FFF;
        }

        > .sea-tab-item-remove {

            &:hover {
                background-color: lightgray;
            }
        }
    }
}

.main-background {
    background-color: #6e6d6d;
}

.main-background {
    box-shadow: 0 12px 32px 4px rgba(0, 0, 0, .04), 0 8px 20px rgba(0, 0, 0, .08);
}

.main-container {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 auto;
    box-shadow: 0 12px 32px 4px rgba(0, 0, 0, .04), 0 8px 20px rgba(0, 0, 0, .08)
}

.main-header {
    opacity: 1;
    flex-shrink: 0;
    height: 64px;
    background-color: #757474;
    display: flex;
    //align-items: center;
    //justify-content: center;
    //padding: 0 12px;
    flex-direction: column;
    gap: 10px;
}

.main-header-hidden {
    height: 0;
    opacity: 0;
}

.main-body {
    flex: 1;
    box-sizing: border-box;
    overflow-y: auto;
}

.main-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 0;
    align-items: center;
    justify-items: center;
    width: 64px;
}


.main-header-item {
    width: 36px;
    height: 36px;
    border: 2px solid #e4dfcc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
        box-shadow: 0 0 8px 8px rgba(30, 229, 206, 0.2);
    }
}

.main-header-btn {
    height: 32px;
    border: 2px solid #e4dfcc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    border-radius: 18px;
    padding: 0 16px;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
        box-shadow: 0 0 8px 8px rgba(30, 229, 206, 0.2);
    }
}

</style>
